<template>
  <div class="app-container">
    <!-- 顶部功能 -->
    <div class="filter-container" style="margin-bottom: 15px">
      <!-- 用户名输入 -->
      <el-input v-model="queryParam.name" placeholder="姓名" style="width: 200px" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="queryParam.userName" placeholder="用户名" style="width: 200px" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <!-- 一些按钮 -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleShowAll">
        显示全部
      </el-button>
    </div>

    <!--数据表格-->
    <el-table ref="multipleTable" :data="tableData" border>

      <el-table-column prop="id" label="序号" align="center" width="100" />

      <el-table-column label="用户名" align="center" prop="userName" />

      <el-table-column label="姓名" align="center" prop="name" />

      <el-table-column label="登录时间" align="center" prop="loginTime" />

    </el-table>

    <!--分页条-->
    <el-pagination background :current-page.sync="queryParam.pageNum" :page-sizes="[5, 10, 20, 50]"
      :page-size="queryParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordTotal"
      style="margin-top: 15px" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import {
  loginLog
} from '@/api/admin/log'

export default {
  name: 'LoginLog',
  directives: { waves },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 记录总数
      recordTotal: 0,
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        name: null
      }
    }
  },
  // 创建后
  created() {
    // 从服务器获取数据表格第一页的信息
    // 默认page=1，size=10
    this.queryPage()
  },
  methods: {
    // 查询分页
    queryPage() {
      loginLog(this.queryParam).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.rows
          this.recordTotal = res.data.total
        }
      })
    },

    // 分页大小改变监听
    handleSizeChange(curSize) {
      this.queryParam.pageSize = curSize
      this.queryPage()
    },

    // 点击分页监听方法
    handleCurrentChange(curPage) {
      this.queryParam.pageNum = curPage
      this.queryPage()
    },

    // 搜索
    handleFilter() {
      this.queryParam.pageNum = 1
      this.queryPage()
    },

    // 点击显示全部
    handleShowAll() {
      this.queryParam.pageNum = 1
      this.queryParam.userName = null
      this.queryParam.name = null
      this.queryPage()
    }
  }
}
</script>
